<template>
  <ekList :layoutData="layoutData" ref="refList"></ekList>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  ref
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ekList from '@/components/business/ekList/index.vue';
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekMessage} = globalProperties;
const store = useStore();
let refList = ref(null);
// 表格头部
let layoutData = {
    modelCode:'MODEL_DEMO',
    config:{
      listUrl: `/business/basis/getList?modelCode=MODEL_DEMO`,
      pageOn: true, // 开启分页
      searchOn: true, // 开启搜索
      operateOn:true, //开启操作区域
      treeOn: true, // 开启左边树
      treePropsOn: false, // 开启表格树形属性
    },
    trees: {
      modelCode:'MODEL_DEPARTMENT',
      url: `/business/basis/getTree?modelCode=MODEL_DEPARTMENT`,
      // 映射后端字段, 接口返回数据和标准格式映射取值，此处转换是前端把数组转换成树，是否做后端树接口兼容处理todo
      fieldMapping: {
        label: 'department_name',
        id: 'id',
        parentId :'parent_id'
      },
      // 左侧数据映射到列表查询条件
      searchMapping: [
        {
          bracket: '(',
          type:'bracket'
        },
        {
          // 来源字段
          sourceField:'id',
          // 目标字段
          targetField:'department_id',
          // 符号
          symbol: 'eq',
        },
        {
          bracket: ')',
          type:'bracket'
        },
      ],
      // 树组件一些配置项todo
      config: {

      }
    },
     // 查询条件
    searchs:[
      {
        type: "Input",
        column: "manage_account",
        label: "管理员账户",
      },
      {
        type: "Select",
        column: "manage_state",
        label: "状态",
        autoInit: false,
        url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
      },
      {
        type: "DatePicker",
        column: "ctime",
        label: "创建日期",
      }
    ],
    // 分页配置
    pages:{
      pageSize: 20,
      orders:[
        {
          field:'id',
          sort:'desc'
        }
      ]
    },
    // 按钮配置
    buttons:[
        {
          type:'add',
          text:'新增',
          config: {
            // 标题
            title:'',
            // 新增成功后是否自动刷新
            autoReload: true, 
            // 打开模型编码
            modelCode:'MODEL_DEMO',
            // 表单配置接口，没有配置走标准接口
            formUrl: ``,
            // 表单新增接口，没有配置走标准接口
            addUrl: ``,
            // 表单保存接口，没有配置走标准接口
            saveUrl: ``,
            // 回调
            callback: () => {
              console.log('add回调了');
             
            }
          }
          
        },
        {
          type:'delete',
          icon:'',
          text:'删除',
          config: {
            // 打开模型编码
            modelCode:'MODEL_DEMO',
            // 表单配置接口，没有配置走标准接口
            deleteUrl: ``,
            // 回调
            callback: () => {
              console.log('delete回调了');
            }
          }
        },
        {
          type:'import',
          icon:'',
          text:'导入',
        },
        {
          type:'export',
          icon:'',
          text:'导出',
          config: {
            // 打开模型编码
            modelCode:'MODEL_DEMO',
            // 表单配置接口，没有配置走标准接口
            exportUrl: ``,
            // 回调
            callback: () => {
              console.log('export回调了');
            }
          }
        },
        // 自定义js
        {
          type:'customJs',
          icon:'',
          text:'自定义js',
          config: {
            // 回调
            callback: () => {
              console.log('customJs回调了',refList.value.getSelectionRows());
              // 执行自定义js 操作
              $ekMessage.success("执行了自定义js");
            }
          }
        },
        // 自定义组件
        {
          type:'customComponents',
          icon:'',
          text:'自定义组件',
          config: {
            // 标题
            title:'自定义组件',
            // 组件
            component: 'demo/components/MyAdd',

            // 回调
            callback: () => {
              console.log('custom回调了');
            }
          }

        },
         
    ],
    // 显示字段
    columns: [
        {type:'selection'},
        {label:'管理员ID', column:'id', sortable:'custom', display :'detail', config: {
          // 打开模型编码
          modelCode:'MODEL_DEMO',
          // 表单配置接口，没有配置走标准接口
          detailUrl: ``
        }},
        {label:'管理员账户', column:'manage_account',sortable:'custom', display:'text'},
        {label:'创建时间', column:'ctime', format:'datetime', display:'text'},
        {label:'操作', column:'operate', width:'220', fixed:'right',buttons:[
          {
            type:'detail',
            icon:'',
            text:'详情',
            config:{
              // 标题
              title:'',
              // 打开模型编码
              modelCode:'MODEL_DEMO',
              // 表单配置接口，没有配置走标准接口
              formUrl: ``,
              // 表单新增接口，没有配置走标准接口
              saveUrl: ``,
              // 表单详情接口，没有配置走标准接口
              detailUrl: ``
            },
          },
           {
            type:'edit',
            icon:'',
            text:'编辑',
            config:{
              // 标题
              title:'',
              // 打开模型编码
              modelCode:'MODEL_DEMO',
              // 表单配置接口，没有配置走标准接口
              formUrl: ``,
              // 表单新增接口，没有配置走标准接口
              saveUrl: ``,
              // 表单详情接口，没有配置走标准接口
              detailUrl: ``,
              // 回调
              callback: () => {
                console.log('edit回调了');
              }
            }
          },
          {
            type:'delete',
            icon:'',
            text:'删除',
            config: {
              // 打开模型编码
              modelCode:'MODEL_DEMO',
              // 表单配置接口，没有配置走标准接口
              deleteUrl: ``,
               // 回调
              callback: () => {
                console.log('delete回调了');
              }
            }
          },
        ]},
    ],
}


// TODO
/**
 * 字段在多功能列表上显示配置，加上字段类型type
 * (1)默认text,文本显示不支持操作
 * (2)input，支持单个值修改
 * (3)switch,开关
 * (4)detail,打开另外一个详情
 * 
 */

/**
 * 自定义操作按钮可以是打开一个新组件
 * 也可以是一个业务逻辑
 */
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
